import React, { Component, useEffect, useState } from "react";
import { View, Button, Text } from "@tarojs/components";
import { observer, inject } from "mobx-react";
import dayjs from "dayjs";
import Taro, { useRouter } from "@tarojs/taro";

import "./index.scss";
import { RootStore } from "../../../src/store/root-store";
import { NavBar } from "../../../src/components/nav-bar";
import { Countdown } from "../../../src/components/count-down";
import { fetchListingDetail, fetchListingList } from "../../../src/api";
import { isIos } from "../../utils";
import { IListing, IListingConfirm } from "src/interfaces";
import classNames from "classnames";

export const Index = ({ withHeader = true }: { withHeader?: boolean }) => {
  const [spaceId, setSpaceId] = useState<string>("");
  const [listingId, setListingId] = useState<string>("");
  const [confirmedBys, setConfirmedBys] = useState<string[]>();
  const [confirmList, setConfirmList] = useState<IListingConfirm[]>([]);
  const [listingDetail, setListingDetail] = useState<IListing>();
  const router = useRouter();
  const stateDom = {
    "0": (
      <span
        className="iconfont icon-daixiugai confirm-icon"
        style={{
          color: "red",
          opacity: "0",
        }}
      ></span>
    ),
    "1": (
      <span
        className="iconfont icon-checkbox-circle-fill confirm-icon"
        style={{
          color: "#6ccdb1",
        }}
      ></span>
    ),
    "2": (
      <span
        className="iconfont icon-daixiugai confirm-icon"
        style={{
          color: "red",
        }}
      ></span>
    ),
  };
  useEffect(() => {
    const init = async () => {
      const routerSpaceId = router.params.spaceId || "";
      const routerListingId = router.params.listingId || "";
      const accessKey = Taro.getStorageSync("accessKey");
      await setSpaceId(routerSpaceId);
      await setListingId(routerListingId);
      Taro.showLoading();
      const [getListingDetailRes, getListingListRes] = await Promise.all([
        fetchListingDetail(routerSpaceId, routerListingId, accessKey),
        fetchListingList(routerSpaceId, routerListingId, accessKey),
      ]);
      Taro.hideLoading();
      if (getListingDetailRes?.code === 0) {
        setListingDetail(getListingDetailRes?.data);
        const confirmBysData = getListingDetailRes?.data?.confirmedBys?.map(
          (item) => {
            return item?.nickName;
          }
        );
        setConfirmedBys(confirmBysData);
      } else {
        alert(getListingDetailRes?.message);
      }
      if (getListingListRes?.code === 0) {
        setConfirmList(getListingListRes?.data);
      } else {
        alert(getListingListRes?.message);
      }
    };
    init();
  }, []);
  return (
    <View
      className={classNames("project-check-detail", {
        ios: isIos(),
      })}
    >
      {withHeader && (
        <NavBar className="nav-bar" center="确认详情" fixed></NavBar>
      )}
      <div className="project-info">
        <p className="project-title ellipsis">{listingDetail?.name}</p>
        <div className="info">
          <span className="info-name">发送人：</span>
          <span className="info-value">
            {listingDetail?.originator?.nickName}
          </span>
        </div>
        <div className="info">
          <span className="info-name">确认人：</span>
          {listingDetail?.confirmType === "open" ? (
            <span className="open">公开</span>
          ) : (
            confirmedBys?.length && (
              <div className="info-container">
                {confirmedBys?.map((item, index) => {
                  if (index > 3) return;
                  return (
                    <span className="info-value">
                      {item?.length > 4 ? `${item?.slice(0, 3)}...` : item}
                    </span>
                  );
                })}
                {confirmedBys?.length > 4 && (
                  <span className="info-value">
                    +{confirmedBys?.length - 4}
                  </span>
                )}
              </div>
            )
          )}
        </div>
        <div className="info">
          <span className="info-name">截止日期：</span>
          <span className="info-value">
            {dayjs(listingDetail?.endDate).format("YYYY/MM/DD")}
          </span>
        </div>
        {Number(listingDetail?.endDate) > +new Date() && (
          <div className="info">
            <span className="iconfont icon-alarm-line count-down-icon"></span>
            <span className="info-name">倒计时：</span>
            <Countdown
              time={dayjs(listingDetail?.endDate).format("YYYY/MM/DD HH:mm:ss")}
            />
          </div>
        )}
      </div>
      <div className="confirm-list">
        <p className="confirm-name">确认项</p>
        <div className="confirm-panel">
          {confirmList.map((item: IListingConfirm) => {
            console.log(item?.confirmState);
            return (
              <div
                className="confirm-item"
                key={item?.id}
                onClick={() => {
                  Taro.navigateTo({
                    url: `/pages/project-check-task/index?spaceId=${spaceId}&listingId=${listingId}&confirmId=${item?.id}`,
                  });
                }}
              >
                {item?.recordState === 5 ? (
                  <span
                    className="iconfont icon-yichaoqi confirm-icon"
                    style={{
                      color: "#f4c55b",
                    }}
                  ></span>
                ) : (
                  stateDom[String(item?.confirmState)]
                )}
                <span
                  className="item-name ellipsis"
                  style={{
                    maxWidth: item?.originType === "file" ? "234px" : "281px",
                  }}
                >
                  {item?.originName}
                </span>
                {item?.originType === "file" &&
                  item?.extendInfo?.version > 1 && (
                    <span className="item-version">
                      版本{item?.extendInfo?.version}
                    </span>
                  )}
              </div>
            );
          })}
        </div>
      </div>
    </View>
  );
};

export default Index;
